import { fetchStatus } from '@/api/global'
import { fetchDeleteTVWall, fetchGetTVWallById, fetchLoadTVWall } from '@/api/sysConfig/tvWallConfig'
import { FetchTVWallItem } from '@/api/sysConfig/tvWallConfig/interface'
import Alert, { confirmModal } from '@/components/Alert'
import Table, { ColumnProps } from '@/components/Table'
import { Button, Modal, Space, Tag } from '@kedacom/react-next'
import React, { useEffect, useState } from 'react'
import { ITVWallItem } from './interface'
import { StyledWrap } from './style'
import { transTVWallEditInfo, transTVWallList } from './translator'
import TvWallConfigEdit from './TVWallConfigEdit'
import TVWallContainer from './context'
import { t } from 'i18next'

export default function TVWallConfig() {
	const [selectedRowIds, setSelectedRowIds] = useState<string[]>([])
	const [data, setData] = useState<ITVWallItem[]>([])
	const [isShowEdit, setIsShowEdit] = useState(false)
	const [curData, setCurData] = useState<FetchTVWallItem | undefined>(undefined)
	const { dispatch } = TVWallContainer.useContainer()

	useEffect(() => {
		loadList()
	}, [])

	useEffect(() => {
		dispatch({ type: 'update', payLoad: transTVWallEditInfo(curData) })
	}, [curData])

	const loadList = () => {
		fetchLoadTVWall(1).then((res) => {
			if (res.success) {
				res.data && setData(transTVWallList(res.data))
			}
		})
	}

	const columns: ColumnProps<ITVWallItem>[] = [
		{ title: t('电视墙名称'), dataKey: 'name' },
		{
			title: t('操作'),
			dataKey: 'action',
			width: 88,
			render: (rowData) => {
				return <Tag onClick={(e) => handleEdit(e, rowData.tvWallTemplateId)}>{t('编辑')}</Tag>
			},
		},
	]

	const handleEdit = (e: React.MouseEvent<Element, MouseEvent>, id: string) => {
		e.stopPropagation()
		fetchGetTVWallById(id).then((data) => {
			if (data) {
				setIsShowEdit(true)
				setCurData(data)
			}
		})
	}

	const handleDelete = () => {
		if (selectedRowIds.length === 0) {
			Alert(t('请选择要删除的电视墙'))
		} else {
			fetchStatus(() => {
				confirmModal({
					msg: <div>{t('确定要删除选择的电视墙吗？')}</div>,
					onOk: () => {
						let arr = data
							.filter((i) => selectedRowIds.indexOf(i.tvWallTemplateId) !== -1)
							.map((j) => ({ id: j.tvWallTemplateId, name: j.name }))
						fetchDeleteTVWall(arr).then((res) => {
							if (res.success) {
								loadList()
								setSelectedRowIds([])
							} else {
								Alert(res.description ?? t('删除失败'))
							}
						})
					},
				})
			})
		}
	}

	const addTVWall = () => {
		setIsShowEdit(true)
		setCurData(undefined)
		dispatch({ type: 'update', payLoad: transTVWallEditInfo(undefined) })
	}

	const handelCancel = () => {
		setIsShowEdit(false)
		setCurData(undefined)
		setSelectedRowIds([])
		loadList()
	}

	return (
		<StyledWrap className="tvwall-config">
			{!isShowEdit && (
				<>
					<Space space={5} className="btns">
						<Button onClick={addTVWall}>{t('添加')}</Button>
						<Button className="delete-btn" onClick={handleDelete}>
							{t('删除')}
						</Button>
					</Space>
					<Table
						rowIdField="tvWallTemplateId"
						columns={columns}
						tableDataList={data}
						pager={{ page: 1, size: 20, total: 1 }}
						selectedRowIds={selectedRowIds}
						onRowSelectAll={(e, selectedRowData, selectedRowIds: string[]) => {
							setSelectedRowIds([...selectedRowIds])
						}}
						onRowClick={(e, rowData, id: string, nextSelected) => {
							if (nextSelected) {
								setSelectedRowIds([...selectedRowIds, id])
							} else {
								setSelectedRowIds(selectedRowIds.filter((item) => item !== id))
							}
						}}
						i18n={{ order: t('序号') }}
						nodata={t('暂无数据')}
					/>
				</>
			)}
			{isShowEdit && <TvWallConfigEdit onCancel={handelCancel} />}
		</StyledWrap>
	)
}
